<!doctype html>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>全选特效</title>
  </head>
  
  <body>
    <form>
      <table width="570" border="1">
        <tr>
          <td colspan="4" align="center">
            <h3>世界顶级跑车你认识几款？</h3></td>
        </tr>
        <tr>
          <td colspan="4" align="center"><input id="car" type="checkbox" name="car">我是超级车迷，全部都认识</td>
        </tr>
        <tr>
          <td width="86" align="center"><input type="checkbox" name="logo"/></td>
          <td width="178" align="center"><img src="./static/select1.jpg"/></td>
          <td width="78" align="center"><input type="checkbox" name="logo"/></td>
          <td width="208" align="center"><img src="./static/select2.jpg"></td>
        </tr>
        <tr>
          <td align="center"><input type="checkbox" name="logo"/></td>
          <td align="center"><img src="./static/select3.jpg"></td>
          <td align="center"><input type="checkbox" name="logo"/></td>
          <td align="center"><img src="./static/select4.jpg"></td>
        </tr>
        <tr>
          <td align="center"><input type="checkbox" name="logo"/></td>
          <td align="center"><img src="./static/select5.jpg"></td>
          <td align="center"><input type="checkbox" name="logo"/></td>
          <td align="center"><img src="./static/select6.jpg"></td>
        </tr>
      </table>
    </form>
  
  </body>
  
  <script>
    function $(id) {
      return document.getElementById(id);
    }
    
    function $name(name) {
      return document.getElementsByName(name);
    }
    
    // 添加事件
    let car = $('car');
    let inputs = $name('logo');
    car.onchange = function () {//保持全选改变子选
      for (let i = 0; i < inputs.length; i++) {
        inputs[i].checked = this.checked;//this==car
      }
    };
    for (let i = 0; i < inputs.length; i++) {
      inputs[i].onchange = option;
    }
    
    function option() {
      let car = $('car');
      let inputs = $name('logo');
      
      //当前按钮取消，全选按钮也取消
      if (this.checked == false) {
        car.checked = false;
        return;
      }
      
      //当前按钮选择，查看所有按钮是不是都选择，未全选则全选按钮不全选
      for (let i = 0; i < inputs.length; i++) {
        if (inputs[i].checked == false) {
          car.checked = false;
          return;
        }
      }
      //单选全选了
      car.checked = true;
    }
  </script>
</html>